<template>
  <div>
    <!-- class="main-el-contarner" -->
    <!-- 设备组成员窗口 -->
    <el-container>
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box2" ref="fixedRef">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入设备名称关键字检索"
                  clearable
                  v-model="param.name"
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch"
                  >查找</el-button
                >
              </el-form-item>

              <!-- <el-form-item style="float: right">
                                <el-button size="mini" type="primary" plain @click="handleAdd"><i class="el-icon-download"></i> 导出数据</el-button>
                            </el-form-item> -->
              <el-form-item style="float: right">
                <el-button
                  type="text"
                  v-if="selectionChangeData == ''"
                  disabled
                  style="color: #cdc5bf"
                  ><i class="el-icon-delete"></i>删除数据</el-button
                >
                <el-button
                  type="text"
                  v-else
                  style="color: #ff0000"
                  @click="delClick"
                  ><i class="el-icon-delete"></i> 删除数据</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button size="mini" type="primary" @click="AddData"
                  ><i class="el-icon-upload2"></i>导入数据</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              stripe
              @row-click="handleRowClick"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              ref="talbes"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="group_name" label="所属设备组">
              </el-table-column>
              <el-table-column prop="device_name" label="设备名称">
              </el-table-column>
              <el-table-column prop="device_code" label="设备编号">
              </el-table-column>
              <el-table-column prop="device_model" label="设备型号">
              </el-table-column>
              <el-table-column prop="model_detail_param" label="型号参数">
              </el-table-column>
              <el-table-column prop="bom_name" label="设备机型">
              </el-table-column>
              <!-- <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button @click="editClick(scope.row)" type="text" icon="el-icon-edit"
                                        style="color: #18BC9C;margin:5px;padding:0px;">编辑</el-button> |
                                    <el-button @click="delClick(scope.row)" type="text" icon="el-icon-delete"
                                        style="color: #FF0000;margin:5px;padding:0px;">删除</el-button>
                                </template>
                            </el-table-column> -->
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div>
            <el-dialog
              v-if="dialogVisible"
              v-dialogDrag
              title="设备卡片"
              :visible.sync="dialogVisible"
              width="70%"
              top="30px"
              :class="dialogVisible == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <device
                  @getName="deviceFromData"
                  :deviceModelData="groupfromData"
                  ref="Devicemethod"
                >
                </device>
              </div>

              <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="bind">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              title="编辑数据"
              v-if="dialogfromdata"
              v-dialogDrag
              :visible.sync="dialogfromdata"
              width="70%"
            >
              <el-form
                :model="devicedata.datas[0]"
                :inline="true"
                :rules="rules"
                ref="devicedata"
              >
                <el-form-item
                  label="所属设备组"
                  :label-width="formLabelWidth"
                  prop="group_name"
                >
                  <el-input
                    v-model="devicedata.datas[0].group_name"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="设备名称"
                  :label-width="formLabelWidth"
                  prop="device_name"
                >
                  <el-input
                    v-model="devicedata.datas[0].device_name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="设备编号"
                  :label-width="formLabelWidth"
                  prop="device_code"
                >
                  <el-input
                    v-model="devicedata.datas[0].device_code"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="设备型号"
                  :label-width="formLabelWidth"
                  prop="device_model"
                >
                  <el-input
                    v-model="devicedata.datas[0].device_model"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="型号参数"
                  :label-width="formLabelWidth"
                  prop="model_detail_param"
                >
                  <el-input
                    v-model="devicedata.datas[0].model_detail_param"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备机型" :label-width="formLabelWidth" prop="bom_name">
                                    <el-input v-model="devicedata.datas[0].bom_name"
                                        autocomplete="off"></el-input>
                                </el-form-item> -->
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogfromdata = false">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  getDateTimes,
  numFormat,
  getDateWeek,
  downloadCallback,
} from '@/utils/index.js'
import { getlist, getexpro, getgridsave, getdeletes } from '@/api/message/list'
import moment from 'moment'
import device from '@/views/message/components/device.vue'

export default {
  name: 'EventRecord',
  components: { device },
  // props:{
  //     'groupData':{
  //         type:String ,
  //         default:''
  //     }
  // },
  props: ['groupData'],
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        funId: 'msg_device_group_members',
        baseSQL: '',
        warnStatus: '',
        name: '',
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogVisible: false,
      dialogfromdata: false,
      selectionChangeData: [],
      devicedata: {
        is_iot: false,
        funId: 'msg_device_group_members',
        datas: [
          {
            group_id: '',
            group_name: '',
            device_id: '',
            device_name: '',
            device_code: '',
            device_model: '', //设备型号
            model_detail_param: '', //型号参数
          },
        ],
      },
      groupfromData: '',
      formLabelWidth: '130px',
      rules: {
        group_name: [
          { required: true, message: '设备组名称必填', trigger: 'blur' },
        ],
        device_name: [
          { required: true, message: '设备名称必填', trigger: 'blur' },
        ],
        device_code: [
          { required: true, message: '设备编号必填', trigger: 'blur' },
        ],
      },
      deviceFromData2: '',
    }
  },
  mounted() {
    //
    this.groupfromData = this.groupData
    this.getDatas()
    window.addEventListener('scroll', this.handleScroll, true)
  },
  created() {
    this.isloading = false
  },
  methods: {
    //监听浏览器滚动距离
    handleScroll(e) {
      let scrollTop = e.target.scrollTop
      if (scrollTop > 30) {
        this.$refs.fixedRef.style.top = 0
      } else {
        this.$refs.fixedRef.style.top = '60px'
      }
    },
    deviceFromData(e) {
      this.deviceFromData2 = e
    },
    //导入数据按钮
    AddData() {
      // setTimeout(() => {
      //     this.$refs.Devicemethod.Devicemethod()
      // }, 5)
      this.dialogVisible = true
      this.deviceFromData2 = ''
    },
    bind() {
      if (this.deviceFromData2.length == '0') {
        this.$message({
          message: '请选择一条数据',
          type: 'error',
        })
      } else {
        let devicedata = []
        this.groupfromData = this.groupData
        this.deviceFromData2.forEach((item) => {
          devicedata.push({
            group_id: this.groupfromData.group_id,
            group_name: this.groupfromData.group_name,
            device_id: item.device_id,
            device_name: item.device_name,
            device_code: item.device_code,
            device_model: item.device_type,
            model_detail_param: item.device_size,
            bom_id: item.bom_id,
            bom_name: item.bom_name,
          })
        })
        this.devicedata.datas = devicedata
        // console.log('eeeeeee',this.devicedata)
        // console.log('this.groupfromData',this.groupfromData)

        this.dialogVisible = false
        this.adddevice()
      }
    },
    adddevice() {
      getgridsave(this.devicedata).then((res) => {
        if (res.data.code == '200') {
          this.$message({
            message: '导入数据成功',
            type: 'success',
          })
          this.getDatas()
          // this.deviceFromData2 = ''
        } else {
          this.$message({
            message: '导入数据失败',
            type: 'error',
          })
        }
      })
    },
    // 复选框按钮
    selectionChange(e) {
      // console.log("selectionChange");
      this.selectionChangeData = e
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e)
      const _selectData = this.$refs.talbes.selection
      this.selectionChange(_selectData)
    },
    //导出按钮
    handleAdd() {
      let fromData = {
        exportFields: [],
        ids: [],
        funId: 'msg_event_records',
      }
      //动态获取表头
      let fields = []
      this.$refs.talbes.$children.forEach((item) => {
        if (item.label != undefined && item.prop != undefined) {
          fields.push({
            title: item.label,
            value: item.prop,
          })
        }
        fromData.exportFields = JSON.stringify(fields)
      })
      //获取主键ID
      if (this.selectionChangeData.length != 0) {
        this.selectionChangeData.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ';'
          }
          fromData.ids += item.event_record_id
        })
      } else {
        this.tabledatas.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ';'
            // console.log('fromData.ids',fromData.ids)
          }
          fromData.ids += item.event_record_id
        })
      }
      downloadCallback(fromData, this.selectionChangeData.length)
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1
      this.getDatas()
    },
    getDatas() {
      this.groupfromData = this.groupData
      // console.log('this.groupfromData',this.groupfromData)
      // if (this.param.name == '' && this.groupfromData.group_name !='') {
      // this.param.baseSQL = ''
      // } else {
      this.param.baseSQL =
        'group_name like"%' +
        this.groupfromData.group_name +
        '%" and ' +
        'device_name like "%' +
        this.param.name +
        '%"'
      // }
      getlist(this.param).then((res) => {
        if (res.status == '200') {
          let resdata = res.data
          this.tabledatas = resdata.rows
          this.dataTotal = resdata.total
        }
      })
    },
    //编辑按钮
    editClick(e) {
      this.getDatas()
      if (this.$refs['devicedata']) {
        this.$refs['devicedata'].resetFields()
      }
      this.dialogfromdata = true
      this.devicedata.datas[0] = e
    },
    //双击打开编辑页面
    // rowdbclick(e) {
    //     this.getDatas()
    //     if (this.$refs['devicedata']) {
    //         this.$refs['devicedata'].resetFields();
    //     }
    //     this.dialogfromdata = true
    //     this.devicedata.datas[0] = e
    // },
    //保存按钮
    save() {
      this.$refs['devicedata'].validate((valid) => {
        if (valid) {
          // console.log('valid',valid)
          if (this.devicedata.datas[0].member_id) {
            this.updatedevice()
            this.dialogfromdata = false
          } else {
            // this.adddevice()
            this.dialogfromdata = false
          }
        }
      })
    },
    updatedevice() {
      getgridsave(this.devicedata).then((res) => {
        if (res.data.code == '200') {
          this.$message({
            message: '修改数据成功',
            type: 'success',
          })
          this.getDatas()
        } else {
          this.$message({
            message: '修改数据失败',
            type: 'error',
          })
        }
      })
    },
    //删除数据
    delClick() {
      var tablefromdata = {
        funId: 'msg_device_group_members',
        ids: '',
      }

      this.selectionChangeData.forEach((item) => {
        tablefromdata.ids += item.member_id + ';'
      })
      this.$confirm(
        `已选择${this.selectionChangeData.length}条数据, 是否删除?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        getdeletes(tablefromdata).then((res) => {
          // if(res.status=='200'){
          if (res.data.code == '200') {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.getDatas()
          } else {
            this.$message({
              message: '删除失败',
              type: 'error',
            })
          }
          // }
          // else{
          //   this.$message({
          //       message: '删除告警失败',
          //       type: 'error'
          //   });
          //}
        })
      })
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1
    },
    sizeChange(val) {
      this.param.limit = val
      this.getDatas()
    },
    currentChange(val) {
      this.param.pageNo = val
      this.param.offset = (val - 1) * this.param.limit
      this.getDatas()
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}

.el-dialog__title {
  display: flex;
  height: 0px;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.action01 {
  animation: zoomIn 0.5s;
  animation-iteration-count: 1;
}

.action02 {
  animation: zoomOut 0.5s;
  animation-iteration-count: 1;
}

.dialog-footer {
  margin-top: -50px;
}

.righttop-search-box2 {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 60px;
  width: calc(100% - 65px);
  z-index: 4;
}

.righttop-search-box2 .el-form-item {
  margin-bottom: 0px !important;
}

.container-box2 {
  padding-top: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
